<template>
  <AdForm v-bind="fromConfig" v-model="models"></AdForm>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { AdFormPorps } from '@fe-hl/admin-design-vue';
interface Models {
  keyword: string;
  mercId: string;
  status: string;
  startime: string;
  endtTme: string;
}
const models = ref<Models>();
const fromConfig: AdFormPorps<Models> = reactive({
  formProps: {
    labelWidth: '80px',
  },
  buttonsSpan: 24,
  buttonsPosition: 'end',
  components: [
    {
      model: 'keyword',
      components: 'el-input',
      props: {
        span: 12,
        label: '关键字',
      },
    },
    {
      model: 'mercId',
      components: 'el-input',
      props: {
        span: 12,
        label: '商户号',
      },
    },
    {
      model: 'orderID',
      components: 'el-input',
      props: {
        span: 24,
        label: '订单号',
      },
    },
    {
      model: 'status',
      components: 'el-select',
      subComponents: 'el-option',
      options: [
        {
          label: '启用',
          value: '1',
        },
        {
          label: '禁用',
          value: '0',
        },
      ],
      props: {
        span: 24,
        label: '状态',
      },
    },
    {
      model: 'daterange',
      components: 'el-date-picker',
      props: {
        span: 24,
        label: '创建时间',
        placeholder: '创建时间',
        type: 'daterange',
        startPlaceholder: '开始时间',
        rangeSeparator: '至',
        endPlaceholder: '结束时间',
        valueFormat: 'YYYY-MM-DD',
      },
      events: {
        change: (value: Array<string> | null) => {
          if (value == null) {
            models.value!.startime = '';
            models.value!.endtTme = '';
          } else {
            models.value!.startime = value[0];
            models.value!.endtTme = value[0];
          }
        },
      },
    },
  ],
  submit: (models) => {
    console.log(models);
  },
  resetForm: () => {
    console.log('resetForm');
  },
});
</script>
